<template>
  <div class="root">
    <div class="mask" v-show="show.mask" @click="show.mask=false">
      <SocialWx />
    </div>
    <div class="main" :class="{'under-mask': show.mask}">
      <div class="card">
        <div class="title">谷亚奇的主页</div>
        <div class="sub">guyaqi.com</div>
        <div class="paragraph">本着爱国敬业，诚信友善的原则。如果大哥你发现服务器有漏洞，还请不要艹。毕竟这服务器不是我的<span class="stained">，搞坏了我也不伤心。</span></div>
      </div>
      <div class="card">
        <div class="row">
          <div class="a" @click="githubOAuth">Login with Github</div>
        </div>
      </div>
      <div class="card">
        <div>主页施工中...</div>
        <div>跳转到<nuxt-link to='/pan'> 网盘</nuxt-link></div>
      </div>

      <div class="social">
        <div class="icon icon-qq" @click="goQQ"><i class="fa fa-qq"></i></div>
        <div class="icon icon-wx" @click="goWX"><i class="fa fa-weixin"></i></div>
        <div class="icon icon-email" @click="goEmail"><i class="fa fa-envelope"></i></div>
      </div>
    </div>

  </div>
</template>

<script>
import "font-awesome/css/font-awesome.min.css"
import SocialWx from '../components/SocialWX'
import {goGithubOAuth} from '../util'

export default {
  components: {
    SocialWx,
  },
  data() {
    return {
      show: {
        mask: false
      }
    }
  },
  mounted() {
    this.auth()
  },
  methods: {
    auth() {
      let res = location.search.match("code=([^$&]+)")
      if (res) {
        res = res[1]
      }
      if (res) {
        console.log('github oauth code: ', res)
        localStorage.setItem('github_login_code', res)
      }
    },
    goQQ() {
      location.href = 'mqqwpa://im/chat?chat_type=wpa&uin=1360668777'
    },
    goWX() {
      this.show.mask = true;
    },
    goEmail() {
      location.href = 'mailto:guyaqi5858@outlook.com'
    },
    githubOAuth() {
      goGithubOAuth()
    }
  }
}
</script>

<style scoped lang="scss">
.root {


}
.main {
  background-image: url('../assets/check_pattern.png');
  background-position: 64px 64px;
  background-repeat: repeat;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.card {
  &:first-child {
    margin-top: 20px;
  }
  margin: 10px 20px;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 3px;

  font-size: 14px;
  line-height: 20px;

  .title {
    font-size: 16px;
    font-weight: 700;
  }
  .sub {
    color: gray;
  }
  .paragraph {
    margin-top: 6px;
  }
  .stained {
    color: #000;
    background-color: #000;
    &:hover {
      color: #fff;
    }
  }
  a, .a {
    color: #00adff;
    text-decoration: none;
  }
  i {
    font-size: 20px;
    padding: 0 4px;
    &.fa-arrow-down {
      font-size: 12px;
    }
  }
  .row {
    display: flex;
    align-items: center;
  }
}

.social {
  $icon-size: 32px;
  margin: 10px 20px;
  display: flex;

  .icon {
    height: $icon-size;
    width: $icon-size;
    background-color: #fff;
    border-radius: $icon-size;
    line-height: $icon-size;
    text-align: center;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.125);
    margin-right: 10px;
    &.icon-qq {
      color: #00adff;
    }
    &.icon-wx {
      color: #1AAD19;
    }
    &.icon-email {
      color: #eaa53e;
    }
  }

}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.under-mask {
  filter: blur(7px);
}
</style>
